/**
* 功能描述：选择器样式表
* @author jin xiaohang
* @date 2022/9/29 10:58
* @version 1.0
*/

@import "src/style/mixins/index";


//布局相关
@mixin select-layout{
  max-height: 150px;
  max-width: 200px;
  position: relative;

  //待选面板布局
  .#{$namespace}-select-panel{
    position: absolute;
    min-width: 200px;
    min-height: 100px;
    max-width: 200px;
    max-height: 200px;
    border-width: 1px;
    margin-top: 5px;
    z-index: 1050;
    box-shadow: 0 2px 8px #00000026;

    //待选面版项布局
    .#{$namespace}-select-item{
      height: 34px;
      line-height: 34px;
    }
  }
}




//样式相关
@include b(select){

  //待选面板样式
  .#{$namespace}-select-panel{
    overflow: hidden;

    //鼠标悬停
    &:hover{
      overflow: hidden scroll;
    }
    background-color: #FFFFFF;
    ul{
      li{
        padding-left: 10px;
        cursor: pointer;
        &:hover{
          background-color: #F5F5F5;
        }

        //禁用状态的样式
        &[disabled]{
          cursor: not-allowed;
          background-color: #FFFFFF;
          color: #bbbbbb;
        }
      }
    }

    //待选面板项样式
    .#{$namespace}-select-item{
      list-style-type:none;
      color: #606266;
    }
  }

  //引用布局
  @include select-layout;
}